<template>
  <el-scrollbar :native="false" style="height: 100%">
    <div style="height:100%">
      <!-- <h1 class="title">
        基于学习者画像的在线考试平台-后台
      </h1> --> 
      <!-- <div style="display: flex;justify-content: center;width: 100%;">

        <div id="leidatu" style="width: 800px;height:400px;"></div>
      </div>
      <el-carousel hidden  :interval="2000"  height="700px"> 
      </el-carousel> -->
      <div style="display: flex;justify-content: center;width: 100%;height: 100%;">
        <div style="width: 100%;height:85vh;">
          <img :src="imageUrl" alt="图片描述" style="width: 100%; height: 100%;">
        </div>
      </div>
    </div>
  </el-scrollbar>
</template>

<script>
import statistic from '@/api/statistic'
import imageUrl from '@/assets/imgs/banner/1.png';
const images = require.context('@/assets/imgs/banner', false, /\.(png|jpe?g|gif)$/)
  export default {
    name: 'Dashboard', 
    data () {
      return {
        imageUrl: imageUrl,
        imageList: [], // 存储图片列表
      // 添加雷达图数据
      radarData: {
      }
      }
    },
    created () { 
      // this.$emit('showSystemNotice2')
      this.getImages();
      // this.showUpdateNoticeDialog();
    },
    methods: {
      getImages() {
        const keys = images.keys();
        for (let key of keys) {
          let imgPath = images(key);
          
          if (!imgPath.includes('.DS_Store')) {
            this.imageList.push({ path: imgPath });
          }
        }
      }, 
    }
  }
</script>

<style scoped lang="scss">
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    // background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    // background-color: #d3dce6;
  }
  div {
    animation: leftMoveIn .7s ease-in;
  }

  @keyframes leftMoveIn {
    0% {
      transform: translateX(-100%);
      opacity: 0;
    }
    100% {
      transform: translateX(0%);
      opacity: 1;
    }
  }

  .title {
    text-align: center;
    font-size: 35px;
  }


  p {
    text-indent: 2em;
  }

  a {
    text-decoration: none
  }
</style>
